<template>
  <div class="home">
   
    <!-- 一条商品 -->
    <div class="shopping_cart" v-for="item in cart_arr" :key="item.id">
      <!-- 复选框 -->
      <input type="checkbox" v-model="item.is" />
      <!-- 商品图片 -->
      <img :src="item.url" width="100px" height="100px" alt="商品图片" />
      <!-- 商品简介 -->
      <span>{{ item.introduce }}</span>
      <!-- 产品的型号 -->
      <span>配置:{{ item.setup }}</span>
      <!-- 产品价格,留小数点后两位 -->
      <span>¥{{ item.price.toFixed(2) }}</span>
      <!-- 减法 -->
      <button @click="decrease(item)">-</button>
      <!-- 个数 -->
      <span>{{ item.num }}</span>
      <!-- 加法 -->
      <button @click="increase(item)">+</button>
      <!-- 价格乘个数等于该商品的总价,保留小数点后两位 -->
      <span>¥{{ (item.price * item.num).toFixed(2) }}</span>
      <!-- 删除按钮 -->
      <button @click="del(item.id)">删除</button>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <!-- 全选按钮 -->
      <input type="checkbox" v-model="allSelected" /> 全选
      <!-- 所有商品总价 -->
      <span>总价:¥{{ totalPrice.toFixed(2) }}</span>
      <!-- 一共打折的价格 -->
      <span>促销-¥{{ discount.toFixed(2) }}</span>
      <!-- 折后价 -->
      <span>折后价:¥{{ Discounted_price.toFixed(2) }}</span>
      <!-- 提交总价                 disabled的作用是当没有选中任何商品时，禁用 “去结算” 按钮-->
      <button @click="checkout" :disabled="selectedCount === 0">去结算</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      //产品的数组
      cart_arr: [
        {
          id: 0,
          url: require("../tupian/30年.jpg"),
          introduce: "简介",
          setup: "oppo:152G,蓝色",
          price: 1000.123,
          num: 1, //初始的个数
          is: false, //复选框的状态
        },
        {
          id: 1,
          url: require("../tupian/1ea5cf891bb509b94e7e0687933517e.jpg"),
          introduce: "简介",
          setup: "小米:152G,陶瓷蓝色",
          price: 1300.321,
          num: 1,
          is: false,
        },
        {
          id: 2,
          url: require("../tupian/24adca5d0882af6aaa30d596386e890.png"),
          introduce: "简介",
          setup: "TCL:152G,黑色",
          price: 789.222,
          num: 1,
          is: false,
        },
        {
          id: 3,
          url: require("../tupian/9a8a0f62ae654f95ec155bc2562a9e8.jpg"),
          introduce: "简介",
          setup: "苹果:1TB,远峰蓝",
          price: 651.235,
          num: 1,
          is: false,
        },
        {
          id: 4,
          url: require("../tupian/9d674b18a8dd04368448c762d313e6f.jpg"),
          introduce: "简介",
          setup: "华为:362G,红色",
          price: 852.258,
          num: 1,
          is: false,
        },
      ],
    };
  },
  computed: {
    // 计算选中商品的总价
    totalPrice() {
      return this.cart_arr.reduce((sum, item) => {
        return item.is ? sum + item.price * item.num : sum;
      }, 0);
    },
    // 计算促销金额
    discount() {
      return this.totalPrice * 0.2;
    },
    //折后价
    Discounted_price() {
      return this.totalPrice - this.discount;
    },
    // 计算已选中的商品数量
    selectedCount() {
      return this.cart_arr.filter((item) => item.is).length;
    },
    // 全选状态
    allSelected: {
      get() {
        return this.cart_arr.every((item) => item.is);
      },
      set(value) {
        this.cart_arr.forEach((item) => {
          item.is = value;
        });
      },
    },
  },
  methods: {
    // 增加商品数量
    increase(item) {
      item.num++;
    },
    // 减少商品数量
    decrease(item) {
      if (item.num > 1) {
        item.num--;
      }
    },
    // 删除
    del(id) {
      if (confirm("确定要删除该商品吗？")) {
        this.cart_arr = this.cart_arr.filter((item) => item.id !== id);
      }
    },
    // 结算
    checkout() {
      const selectedItems = this.cart_arr.filter((item) => item.is);
      if (selectedItems.length === 0) {
        alert("请选择要结算的商品");
        return;
      }
      alert(
        `结算成功！共支付：¥${(this.totalPrice - this.discount).toFixed(2)}`
      );
      // 清空已结算的商品
      this.cart_arr = this.cart_arr.filter((item) => !item.is);
    },
  },
  filters: {},
};
</script>

<style scoped>
.shopping_cart {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.shopping_cart > * {
  margin-right: 15px;
}

.bottom {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
}

.bottom > * {
  margin-right: 20px;
}

button {
  padding: 5px 10px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>